<template>
  <div class="app-container">
    <div class="cbox">
      <el-form class="form" :model="searchForm" label-width="9rem" ref="searchForm" size="mini">
        <el-row :gutter="10" style="padding-top: 10px">
          <el-col :span="4">
            <el-form-item size="mini"  label="角色名称：" prop="roleName">
              <el-input clearable maxlength="8" v-model="searchForm.roleName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item size="mini"  label="角色类型：" prop="roleStyle">
              <el-select style="width: 100%;" v-model="searchForm.roleStyle"  filterable clearable>
                <el-option
                  v-for="(item,index) in roleList"
                  :key="index"
                  :label="item.rvCmeaning"
                  :value="item.rvEmeaning">
                  <span style="float: left">{{ item.rvEmeaning }}</span>
                  <span style="float: right; color: #8492a6;">{{ item.rvCmeaning }}</span>
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button size="mini" type="primary" @click="search">查询</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="24">
            <el-form-item size="mini" label-width="10px">
              <el-button size="mini" type="success" plain @click="add">新增</el-button>
              <el-button size="mini" type="primary" plain @click="edit">编辑</el-button>
              <el-button size="mini" type="danger" plain @click="del">删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table">
      <div class="inner" ref="inner">
        <el-table :height="maxHeight" :data="rleList" :highlight-current-row="true" border :header-cell-style="{ textAlign: 'center' }" @row-click="getCurrentData">
          <el-table-column align="center" width="50" label="序号" :index="indexMethod" type="index"></el-table-column>
          <el-table-column  show-overflow-tooltip  label="角色代码"  prop="rleCode"></el-table-column>
          <el-table-column  show-overflow-tooltip  label="角色名称"  prop="rleName"></el-table-column>
          <el-table-column  show-overflow-tooltip  label="角色类型"  prop="roleTypeName"></el-table-column>
          <el-table-column  show-overflow-tooltip align="center"  label="管理员角色"  prop="rleIsp"></el-table-column>
          <el-table-column  show-overflow-tooltip  label="备注"  prop="rleRemark"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      ref="pagination"
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog v-el-drag-dialog :close-on-click-modal="false"  :close-on-press-escape="false" :visible.sync="showDialog" width="30%" @close='dialogClose'  :title="dialogTitle">
      <div class="dialogBox">
        <el-form :model="dialogForm" label-width="14rem" ref="dialogForm" size="mini" :rules="dialogRules">
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="角色代码：" prop="roleCode">
                <el-input clearable maxlength="8" v-model="dialogForm.roleCode" :disabled="roleCodeDisabled"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="角色名称：" prop="roleName">
                <el-input clearable maxlength="8" v-model="dialogForm.roleName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="角色类型：" prop="roleStyle">
                <el-select style="width: 100%;"  v-model="dialogForm.roleStyle"  filterable clearable>
                  <el-option
                    v-for="(item,index) in roleList"
                    :key="index"
                    :label="item.rvCmeaning"
                    :value="item.rvEmeaning">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item size="mini" label="是否管理员角色" prop="manageRole">
                <el-radio v-model="dialogForm.manageRole" label="Y">是</el-radio>
                <el-radio v-model="dialogForm.manageRole" label="N">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" prop="note">
                <el-input type="textarea" v-model="dialogForm.note" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showDialog = false">关闭</el-button>
        <el-button size="mini" type="primary" @click="dialogSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import { getRoleDown,checkRoleList,addRoleList,editRoleList,delRoleList } from '@/request/api'
export default {
  name: 'router.roleManagement',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      isEditMode: true,
      dialogTitle: '', // 弹窗标题
      showDialog: false,
      searchForm: {
        roleName: '', // 角色名称
        roleStyle: '' // 角色类型
      },
      roleCodeDisabled: false, // 控制角色代码是否置灰
      rleList: [], // 角色列表表格数据
      roleList: [], // 角色类型下拉框
      currentRow: '', // 当前行数据
      maxHeight: -1, // 主表高度
      dialogForm: {
        roleCode: '', // 角色代码
        roleName: '', // 角色名称
        roleStyle: '', // 角色类型
        manageRole: 'N', // 是否管理员角色
        note: '', // 备注
      },
      dialogRules: {
        roleCode: [
          { required: true, message: '角色代码不能为空', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        roleStyle: [
          { required: true, message: '角色类型不能为空', trigger: 'blur' }
        ],
        manageRole: [
          { required: true, message: '是否管理员角色必选', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    this.getMainTableData()
    this.getSelectData()
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  methods: {
    // 监听弹窗关闭事件
    dialogClose() {
      this.currentRow = ''
      this.getMainTableData()
      this.$refs.dialogForm.resetFields()
    },
    // 查询
    search() {
      this.getMainTableData()
    },
    // 新增
    add() {
      this.dialogTitle = '新增角色'
      this.showDialog = true
    },
    // 编辑
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.roleCodeDisabled = true
      this.dialogForm.roleCode = this.currentRow.rleCode
      this.dialogForm.roleName = this.currentRow.rleName
      this.dialogForm.roleStyle = this.currentRow.rleType
      this.dialogForm.manageRole = this.currentRow.rleIsp == '是' ? 'Y' : 'N'
      this.dialogForm.note = this.currentRow.rleRemark
      this.dialogTitle = '编辑角色'
      this.showDialog = true
    },
    // 删除
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRoleList({rleId: this.currentRow.rleId}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getMainTableData()
          }
        })
      }).catch(() => {
      })

    },
    // 下拉框数据
    getSelectData() {
      getRoleDown().then(res => {
        if(res.success == 1) {
          this.roleList = res.data.FTKJWLHYPT
        }
      })
    },
    // 获取主表数据
    getMainTableData() {
      let needArr = Object.assign(this.searchForm,{rleCode: ''},{PageIndexs: this.Pagination.currentPage},{PageSizes: this.Pagination.pageSize})
      checkRoleList(needArr).then(res => {
        if(res.success == 1) {
          this.rleList = res.data.FTKJWLHYPT
          this.rleList = this.rleList.filter(item => {
            if(item.rleIsp == 'Y') {
              return item.rleIsp = '是'
            }else if (item.rleIsp == 'N') {
              return item.rleIsp = '否'
            }
          })
          this.Pagination.total = res.data.total.FTKJWLHYPT
        }
      })
    },
    getCurrentData(row) {
      this.currentRow = row
      console.log(row)
    },
    // 弹窗保存按钮
    dialogSave() {
      this.$refs.dialogForm.validate(valid => {
        if(valid) {
          if(this.dialogTitle == '新增角色') {
            addRoleList(this.dialogForm).then(res => {
              if(res.success == 1) {
                this.$message({
                  type: 'success',
                  message: '新增成功'
                })
                this.showDialog = false
                this.getMainTableData()
              }
              console.log(res)
            })
          }else if (this.dialogTitle == '编辑角色') {
            let needArr = Object.assign(this.dialogForm,{rleId: this.currentRow.rleId})
            editRoleList(needArr).then(res => {
              if(res.success == 1) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.showDialog = false
                this.getMainTableData()
              }

            })
          }
        }
      })
    }
  },


}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      margin: 1rem 0;
      flex: 0 0 auto;
    }
  }
}
</style>
